How to Host Blog Images without Breaking the Bank

This blog started in 2016 and image hosting looked a lot different back then. We didn’t have too many images, and we could get away with every free tier of various services, based on our traffic and overall bandwidth usage.

If you fast-forward to 2022, we suddenly had 9,000 images on this website. Our blog used about 275 GB worth of bandwidth every month. For reference, the bandwidth includes CDN traffic and requests.

The way in which the images were set up wasn’t too complicated, but at scale, the price was going to be more than I wanted to pay on a monthly basis. All of the images were hosted on S3, and Imgix was used to transform images on the fly.

For a little back-story, this blog is a static site and it’s hosted on Jekyll. The fact that it’s not being hosted on WordPress is a little outside the industry standard, for travel blogs. You can read more about how we built our blog here.

For WordPress bloggers, the solution might be a little easier to integrate, as you already have a hosting plan with bandwidth and CDN options available.

Establish requirements

Because this blog’s requirements grew as the site grew (in terms of traffic and posts), I maybe would have done things differently from the start.

For me, my requirements are to be able to transform image sizes on the fly and serve images with next-gen image formats. I need to be able to crop images as well.

Based on the amount of traffic and overall bandwidth, I need to find a cost-effective solution to accommodate that usage.

For you, I’d suggest creating a bulleted list of what’s important to you, as you think about what happens when you want to scale your site.

Here are the exact requirements that I used to evaluate the best option for image hosting.

Easily upload photos

I didn’t want to have to write any custom code in order to upload or sync images. I may want to in the future, but uploading images manually is fine and is part of the process.

Ability to have a custom domain

My Imgix image URLs are halfhalftravel.imgix.net. When I moved services, I wasn’t able to redirect the domain. In the future, I want control over the domain where the images are hosted, so that I can maintain any redirects if necessary.

I’d prefer to use something like cdn.halfhalftravel.com or images.halfhalftravel.com for this use case.

Also for SEO purposes, it doesn’t technically matter where you host your images. Google indexes my images well, and I get good traffic from them; however, when you move CDNs, as mentioned in this tweet, you risk changing URLs quite often.

And this is exactly what I’m going through. I’ll likely (and hopefully temporarily) lose my image traffic while this migration is underway. There’s no way with Imgix to handle redirects to my new CDN URL.

On-the-fly image transformations

Because most of my images use image srcset, I need the ability to have lots of image resize based on which device and which screen size requests it.

I also have a few images for which I manually change the size, to make sure that I’m not serving a huge image in a 150x150 square.

Lastly, for open graph images, I’d like to crop images to a specific size. 1200x630 is the default size, and all of the blog post cover images crop to that exact size.

Without these on-the-fly transformations, I’d need to maintain roughly eight times the amount of images, and have a script to resize them and upload them. I actually tried that, and I’ll go into that approach down below.

Cost-effective

This was the most important factor for me. There are lots of image services that double as DAM (digital asset managers). While it’s great to be able to manage your photos and media, it’s overkill for what I need, because I maintain a local copy of all of my images and don’t need any user-uploaded content nor content uploaded from a CMS.

You’ll see more about this, in the overview of services!

Compare all of the competitors

When figuring out how to migrate my images, I looked at all of these services.

Additionally, I considered these methods for coming up with my own solution:

• Putting CloudFront in front of my S3 bucket
• Creating a server-less Lambda function to resize images
• Host my own, using something like this open source library

Evaluating the options

When I started looking at all of the options out there, for the bandwidth that I needed, the price ranged from $100 – $300 per month. This wouldn’t scale in my favor. I could be paying a lot to serve images, as our traffic continued to grow.

The deal-breaker for me was going to be finding a service with unlimited bandwidth. Imgix offers this, but the service is $300/month for our amount of origin images, and that felt like overkill for this blog.

All of the options above will work for most bloggers, and there’s a time and a place for them. They all have unique features that might work for your specific use case.

Bunny.net met all of my requirements, it was the cheapest option of all the ones I surveyed. Additionally, and maybe surprisingly, it was the easiest to set up.

I can upload all of my images through FTP, and also the web interface down the road. There’s a well-documented API for this, so I can create a custom solution to upload images if I wanted to.

Setting up a custom domain was very easy. I needed to update a CNAME record on my DNS, and then I was able to use a custom domain. The service provided an SSL certificate. The process took less than one minute.

I can transform my images the way I want to. My basic transforms are more than covered. The only caveat is cropping, and resizing wasn’t the clearest, from their documentation. For example, I wanted to resize an image to 1200x630 and have it cropped. I needed to use the aspect_ratio=1200:630 url parameter in order to get this to work properly.

Other services have various different crop params that make it easy.

And lastly, this was one of the most cost-effective options, other than creating my own setup using the AWS infrastructure. The CDN is a low cost per GB, like a few cents. And the image manipulation is around $10/mo.

Bonus points: You can set up some defaults, like image quality and maximum size thresholds. I set this up so that I don’t need to set the quality url parameter on every image.

Using WordPress?

If you’re using WordPress to host images and if you’re a blogger looking for a solution, I’d probably use Bunny.net because of how easy it was, and how it made managing my images so simple. Bunny.net has this guide on their company blog that shows you more information about that.

So, what changed?

My image URLs changed from https://halfhalftravel.imgix.net/ to https://images.halfhalftravel.com/.

My estimated cost went from $300 down to $15. The special case was that I was using a legacy Imgix plan, but I hit my rate limit and would need to either upgrade or work out a deal with their sales team.

Why did I do this?

As a travel blog that features lots of my photography, this is an image-heavy website. And ironically, this article has virtually no images.

But I digress! We post a lot of photo galleries, travel guides, product reviews and more. The blog posts have a lot of images that showcase our photography and our goal is to give you, the reader, the best experience possible when browsing through all our content.

For the long term of this site, I wanted to find a solution that would let our site naturally grow, and wouldn’t limit us into a box with fixed limits, like origin images, bandwidth or something else.